extends layout

block content
  h1= title


   h1 留存数据


  div#page-wrapper
      div#page-inner

          div.row
              div.col-md-12.col-sm-12.col-xs-12
                  div.panel.panel-default
                      table.table.table-striped.table-bordered.table-hover
                          tr
                              for head in heads
                                  th #{head}
                              for data in datas
                                  tr
                                      td #{data.name}
                                      td 
                                       input(type="button",value="查看") 
  script.
    (function ($) {
        "use strict";
        var mainApp = {

            initFunction: function () {
                /*MENU
                 ------------------------------------*/
                $('#main-menu').metisMenu();

                $(window).bind("load resize", function () {
                    if ($(this).width() < 768) {
                        $('div.sidebar-collapse').addClass('collapse')
                    } else {
                        $('div.sidebar-collapse').removeClass('collapse')
                    }
                });


                /* MORRIS LINE CHART
                 ----------------------------------------*/
                Morris.Line({
                    element: 'morris-line-chart',
                    data: !{chart_user_datas},
                    xkey: 'x',
                    ykeys: ['y1'],
                    labels: ['每日活跃', '日期'],
                    fillOpacity: 0.6,
                    hideHover: 'auto',
                    behaveLikeLine: true,
                    resize: true,
                    pointFillColors: ['#ffffff'],
                    pointStrokeColors: ['black'],
                    lineColors: ['gray', '#1cc09f']

                });

                Morris.Line({
                    element: 'morris-line-chart1',
                    data: !{chart_user_datas},
                    xkey: 'x',
                    ykeys: [ 'y2'],
                    labels: ['在线时长', '每日新增'],
                    fillOpacity: 0.6,
                    hideHover: 'auto',
                    behaveLikeLine: true,
                    resize: true,
                    pointFillColors: ['#ffffff'],
                    pointStrokeColors: ['black'],
                    lineColors: [ '#1cc09f', 'blue']

                });

                Morris.Line({
                    element: 'morris-line-chart2',
                    data: !{chart_user_datas},
                    xkey: 'x',
                    ykeys: [ 'y3'],
                    labels: [ '每日新增'],
                    fillOpacity: 0.6,
                    hideHover: 'auto',
                    behaveLikeLine: true,
                    resize: true,
                    pointFillColors: ['#ffffff'],
                    pointStrokeColors: ['black'],
                    lineColors: [ 'blue']

                });



            },

            initialization: function () {
                mainApp.initFunction();

            }

        }
        // Initializing ///

        $(document).ready(function () {
            mainApp.initFunction();
            $("#sideNav").click(function () {
                if ($(this).hasClass('closed')) {
                    $('.navbar-side').animate({left: '0px'});
                    $(this).removeClass('closed');
                    $('#page-wrapper').animate({'margin-left': '260px'});

                }
                else {
                    $(this).addClass('closed');
                    $('.navbar-side').animate({left: '-260px'});
                    $('#page-wrapper').animate({'margin-left': '0px'});
                }
            });
        });

    }(jQuery));


